"use client"

import type React from "react"
import { createContext, useContext, useState, type ReactNode } from "react"
import { useColorScheme } from "react-native"

// Define theme colors
export const lightTheme = {
    primary: "#FF9AA2", // Soft pink
    secondary: "#FFDAC1", // Soft peach
    accent: "#E2F0CB", // Soft lime
    background: "#FFFAF0", // Soft cream
    card: "#FFF",
    text: "#333333",
    border: "#E5E5E5",
    notification: "#FF6B6B",
    success: "#7EC850",
    warning: "#FFD166",
    error: "#FF6B6B",
}

export const darkTheme = {
    primary: "#FF9AA2", // Keep the same warm colors
    secondary: "#FFDAC1",
    accent: "#E2F0CB",
    background: "#2D2D2D",
    card: "#3D3D3D",
    text: "#F5F5F5",
    border: "#505050",
    notification: "#FF6B6B",
    success: "#7EC850",
    warning: "#FFD166",
    error: "#FF6B6B",
}

type Theme = typeof lightTheme

interface ThemeContextType {
    theme: Theme
    isDark: boolean
    toggleTheme: () => void
}

const ThemeContext = createContext<ThemeContextType | undefined>(undefined)

export const ThemeProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
    const colorScheme = useColorScheme()
    const [isDark, setIsDark] = useState(colorScheme === "dark")
    const theme = isDark ? darkTheme : lightTheme

    const toggleTheme = () => {
        setIsDark(!isDark)
    }

    return <ThemeContext.Provider value={{ theme, isDark, toggleTheme }}>{children}</ThemeContext.Provider>
}

export const useTheme = (): ThemeContextType => {
    const context = useContext(ThemeContext)
    if (context === undefined) {
        throw new Error("useTheme must be used within a ThemeProvider")
    }
    return context
}

